<template>
	<view class="pages_content">
		<view class="person_main">
			<view class="person_main_title">
				负责人{{`(${dataObj.engineerMain.id?'1/1':'0/1'})`}}
			</view>
			<view class="person_main_info">
				<view class="img">
					<image mode="aspectFill" class="user_img" v-if="dataObj.engineerMain.avatar"
						:src="dataObj.engineerMain.avatar" />
					<uni-icons size="75" color="#007cff" type="contact-filled" v-else></uni-icons>
				</view>
				<view class="person_main_info_user">
					<view class="person_main_info_left" v-if="dataObj.engineerMain.id">
						<view class="name">
							{{dataObj.engineerMain.userName}}
						</view>
						<view class="tip">
							{{dataObj.engineerMain.phone}}&nbsp;(当前{{dataObj.engineerMain.qty||0}}单)
						</view>
					</view>
					<view class="person_main_info_right_change" @click="addEmp(true)" v-if="dataObj.engineerMain.id">
						更改
					</view>
					<view class="person_main_info_right" v-else @click="addEmp(true)">
						添加
					</view>
				</view>
			</view>
		</view>
		<view class="person_minor">
			<view class="person_minor_title">
				<view class="">
					协同人{{`(${dataObj.seletIds.length}/3)`}}
				</view>
				<view class="person_minor_info_right" @click="addEmp(false)"
					v-if="!(dataObj.seletIds.length==0&&dataObj.engineers.length==1)||(dataObj.seletIds.length==0&&dataObj.engineers.length==0)">
					添加
				</view>
			</view>
			<view class="person_minor_info" v-for="(item,index) in dataObj.engineers" :key="index">
				<view class="img">
					<image mode="aspectFill" class="user_img" v-if="item.avatar" :src="item.avatar" />
					<uni-icons size="75" color="#007cff" type="contact-filled" v-else></uni-icons>
				</view>
				<view class="person_minor_info_user">
					<view class="person_minor_info_left" v-if="item.id">
						<view class="name">
							{{item.userName}}
						</view>
						<view class="tip">
							{{item.phone}}&nbsp;(当前{{item.qty||0}}单)
						</view>
					</view>
					<view class="person_minor_info_right" @click="addEmp(false)"
						v-if="dataObj.engineers.length==1&&!item.id">
						添加
					</view>
					<view class="person_minor_info_right_delet" @click="deletEmp(item.id)" v-else>
						删除
					</view>
				</view>
			</view>
		</view>
		<view class="person_main">
			<view class="person_main_title">
				备注
			</view>
			<view class="person_main_info">
				<uni-easyinput v-model="dispatchEngineerVo.remark" type="textarea" placeholder="请输入备注"></uni-easyinput>
			</view>
		</view>
		<view class="footer_order">
			<view class="footer_order_right" @click="onSubmit">
				<view class="btn">提交</view>
			</view>
		</view>
		<uni-popup ref="popupref" safeArea type="bottom">
			<view class="popup-content">
				<view class="popup-content_title">
					<view class="title_tip">
						{{`指派${isMainEmp?'负责人':'协同人'}`}}
					</view>
					<uni-icons type="close" color="#999" size="26" @click="popupref.close()"></uni-icons>
				</view>
				<view class="search_card">
					<uni-search-bar class="search_card_bar" @confirm="search" placeholder="关键词搜索" radius="100"
						bg-color="rgba(242, 243, 245, 1)" cancelButton="none" :focus="true" v-model="selectVo.name"
						@input="input" @clear="clear">
					</uni-search-bar>
					<view class="search_btn">
						搜索
					</view>
				</view>
				<view class="search_muen">
					<view class="msg_kong" v-if="searchValueObj.length==0">
						暂未查询到成员
					</view>
					<view class="search_muen_item" v-for="(item,index) in searchValueObj" :key="index">
						<view class="img">
							<image mode="aspectFill" class="user_img" v-if="item.avatar" :src="item.avatar" />
							<uni-icons size="68" color="#007cff" type="contact-filled" v-else></uni-icons>
						</view>
						<view class="search_muen_item_user">
							<view class="search_muen_item_left">
								<view class="name">
									{{item.userName}}
								</view>
								<view class="tip">
									{{item.phone}}&nbsp;(当前{{item.qty||0}}单)
								</view>
							</view>
							<view class="search_muen_item_right_change" @click="onItem(item)"
								v-if="!dataObj.seletIds.includes(item.id)&&dataObj.engineerMain.id!=item.id">
								指派
							</view>
							<view class="search_muen_item_right_main_emp" v-else-if="dataObj.engineerMain.id==item.id">
								负责人
							</view>
							<view class="search_muen_item_right_delet" v-else @click="deletEmp(item.id)">
								删除
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
	import {
		ref,
		reactive,
		nextTick, onMounted
	} from "vue"
	import _ from "lodash"
	import store from '@/store_network/index.js'
	import { onReachBottom, onPullDownRefresh, onUnload, onLaunch, onLoad, onHide } from '@dcloudio/uni-app'
	import apiOrder from "@/util/network_api/apiOrder.js"
	const popupref = ref()
	const addEmp = (isEmp) => {
		search()
		isMainEmp.value = isEmp
		popupref.value.open()
	}
	const dispatchEngineerVo = ref({
		"engineerCooperateIds": [],//工程师协同人ID
		"engineerManagerId": 0,//工程师负责人员ID
		"remark": ""
	})
	const isMainEmp = ref(true)//负责人
	const dataObj = ref({
		engineerMain: {
			"id": null,
			"phone": "",
			"userName": "",
			"qty": 0,
			"avatar": ""

		},
		engineers: [{
			"id": null,
			"phone": "",
			"userName": "",
			"qty": 0,
			"avatar": ""
		}],
		seletIds: []// 已选择的人员Id
	})
	onUnload(()=>{
		uni.hideLoading()
	})
	const selectVo = ref({
		"limit": 0,
		"name": "",
		"page": 0
	})
	// 添加 更改
	const onItem = (item) => {
		if (isMainEmp.value) {
			dataObj.value.engineerMain = item
			
		} else {
			if (dataObj.value.seletIds.length == 0) {
				dataObj.value.engineers = [item]
			} else {
				if (dataObj.value.engineers.length == 3) {
					uni.showToast({
						title: "协同人最多3个"
					})
					popupref.value.close()
					return
				}
				dataObj.value.engineers.push(item)
				if (dataObj.value.engineers.length == 3) popupref.value.close()
			}
			dataObj.value.seletIds = dataObj.value.engineers.map(o => o.id)
		}
		popupref.value.close()
	}
	const deletEmp = (id) => {
		dataObj.value.engineers = dataObj.value.engineers.filter(o => o.id != id)
		dataObj.value.seletIds = dataObj.value.engineers.map(o => o.id)
	}
	// 提交
	const onSubmit = async () => {
		if (!dataObj.value.engineerMain.id) {
			uni.showToast({
				title: "请选择负责人",
				icon: 'none'
			})
		} else {
			if (!workId.value) return
			dispatchEngineerVo.value.engineerCooperateIds = dataObj.value.seletIds
			dispatchEngineerVo.value.engineerManagerId = dataObj.value.engineerMain.id

			uni.showLoading({
				title: '加载中...'
			})
			await apiOrder.networkDispatchEngineer(dispatchEngineerVo.value, workId.value).then(res => {
				if (res.code == 20000) {
					uni.hideLoading()
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					uni.redirectTo({
						url: '/pages/pages_network/order/detail?workId='+workId.value
					})
					uni.setStorageSync('order_detail', 1)
				}
			})
			uni.hideLoading()
		}
	}
	const workId = ref(null)
	onLoad((e) => {
		workId.value = e.workId
	})
	const searchValueObj = ref([])
	const search = async () => {
		uni.showLoading({
			title: "搜索中...",
		})
		selectVo.value.name=selectVo.value.name.trim()
		await apiOrder.getNetworkDispatchEngineer(selectVo.value).then(res => {
			if (res.code == 20000) {
				searchValueObj.value = res.data.rows
			}
		})
		uni.hideLoading()
	}
	const clear = () => {
		selectVo.value.name = ''
		search()
	}
	const input = _.debounce(() => {
		// if (!selectVo.value.name) return
		search()
	}, 700)
</script>

<style lang="scss" scoped>
	.pages_content {
		height: 100vh;
		background-color: #fafafa;


		.person_main {
			padding: 32rpx;

			&_title {
				color: #999;
				font-size: 28rpx;
			}

			&_info {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #fff;
				margin: 24rpx 0;
				padding: 12rpx;
				border-radius: 10rpx;

				.img {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					margin-right: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					overflow: hidden;
					background-color: #fff;

					.user_img {
						width: 120rpx;
						height: 120rpx;
					}
				}

				&_left {
					flex: 1;

					.tip {
						font-size: 24rpx;
						margin-top: 12rpx;
					}
				}

				&_user {
					flex: 1;
					display: flex;
					align-items: center;
					// justify-content: space-between;
					justify-content: flex-end;

					.person_main_info_right {
						border: 1rpx solid #007cff;
						font-size: 24rpx;
						padding: 8rpx 22rpx;
						color: #007cff;
						border-radius: 4rpx;
						font-weight: bold;

						&_change {
							border: 1rpx solid #000;
							font-size: 24rpx;
							padding: 8rpx 22rpx;
							color: #000;
							border-radius: 4rpx;
							font-weight: bold;
						}
					}
				}
			}
		}

		.person_minor {
			padding: 32rpx;

			&_title {
				color: #999;
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.person_minor_info_right {
					border: 1rpx solid #007cff;
					font-size: 24rpx;
					padding: 8rpx 22rpx;
					color: #007cff;
					border-radius: 4rpx;
					font-weight: bold;
					margin: 0 12rpx;
				}
			}

			&_info {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #fff;
				margin: 24rpx 0;
				padding: 12rpx;
				border-radius: 10rpx;

				.img {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					margin-right: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					overflow: hidden;
					background-color: #fff;

					.user_img {
						width: 120rpx;
						height: 120rpx;
						
					}
				}

				&_left {
					flex: 1;

					.tip {
						font-size: 24rpx;
						margin-top: 12rpx;
					}
				}

				&_user {
					flex: 1;
					display: flex;
					align-items: center;
					// justify-content: space-between;
					justify-content: flex-end;

					.person_minor_info_right {
						border: 1rpx solid #007cff;
						font-size: 24rpx;
						padding: 8rpx 22rpx;
						color: #007cff;
						border-radius: 4rpx;
						font-weight: bold;

						&_change {
							border: 1rpx solid #000;
							font-size: 24rpx;
							padding: 8rpx 22rpx;
							color: #000;
							border-radius: 4rpx;
							font-weight: bold;
						}

						&_delet {
							border: 1rpx solid #f56c6c;
							font-size: 24rpx;
							padding: 8rpx 22rpx;
							color: #f56c6c;
							border-radius: 4rpx;
							font-weight: bold;
						}
					}
				}
			}
		}

		.footer_order {
			display: flex;
			align-items: center;
			background-color: #FFFFFF;
			z-index: 99;
			height: 120rpx;
			position: fixed;
			bottom: 0;
			width: 100%;
			padding: 48rpx;
			box-sizing: border-box;

			&_left {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				margin-right: 24rpx;

				.red_tip {
					color: rgba(245, 108, 108, 1);
				}

				.gray_tip {
					color: rgba(144, 147, 153, 1);
				}

				.delet_icon {
					padding: 2rpx;
					background-color: rgba(245, 108, 108, 1);
					border-radius: 50%;
					height: 40rpx;
					width: 40rpx;
					margin: 10rpx;
				}
			}

			&_right {
				flex: 1;
				border-radius: 45rpx;
				height: 80rpx;
				background-color: #007cff;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 28rpx;
				font-weight: bold;
			}
		}

		.popup-content {
			height: 86vh;
			background-color: #FFFFFF;
			margin: 0 auto;
			border-radius: 20rpx 20rpx 0 0;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			flex: 1;

			&_title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 24rpx 24rpx 0;

				.title_tip {
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			.search_card {
				display: flex;
				align-items: center;
				margin: 10rpx 24rpx;

				&_bar {
					flex: 1;
				}

				.search_btn {
					font-size: 28rpx;
					color: #007cff;
					font-weight: bold;
				}
			}

			.search_muen {
				flex: 1;
				overflow: auto;
				margin: 24rpx;
				height: 100%;
				padding-bottom: 200rpx;

				&_item {
					font-size: 30rpx;
					border-bottom: 1rpx solid rgba(242, 243, 245, 1);
					padding: 32rpx;
					display: flex;
					align-items: center;

					&:last-child {
						border-bottom: none;
					}

					.img {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
						margin-right: 20rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						overflow: hidden;
						background-color: #fff;
						.user_img {
							width: 90rpx;
							height: 90rpx;
						}
					}

					&_left {
						flex: 1;

						.tip {
							font-size: 24rpx;
							margin-top: 12rpx;
						}
					}

					&_user {
						flex: 1;
						display: flex;
						align-items: center;
						// justify-content: space-between;
						justify-content: flex-end;

						.search_muen_item_right {
							border: 1rpx solid #007cff;
							font-size: 24rpx;
							padding: 8rpx 22rpx;
							color: #007cff;
							border-radius: 4rpx;
							font-weight: bold;

							&_change {
								border: 1rpx solid #000;
								font-size: 24rpx;
								padding: 8rpx 22rpx;
								color: #000;
								border-radius: 4rpx;
								font-weight: bold;
							}

							&_delet {
								border: 1rpx solid #f56c6c;
								font-size: 24rpx;
								padding: 8rpx 22rpx;
								color: #f56c6c;
								border-radius: 4rpx;
								font-weight: bold;
							}

							&_main_emp {
								font-size: 28rpx;
								color: #007cff;
							}
						}
					}
				}

				.msg_kong {
					color: #999;
					font-size: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin: auto;
					height: 80%;
				}
			}
		}
	}
</style>